import { coffeeOrderType, orderType } from "@/type/coffeeType";
import { orderNum } from "@/utils/orderNum";
import { seleFM } from "@/utils/seleFormat";
import { Button } from "antd";
import Table, { ColumnsType } from "antd/es/table";
import React, { FC, memo, useEffect, useState } from "react";
import { ViewOrderWrapper } from "./style";

interface IProps {
  allOrder: coffeeOrderType["shopCar"][];
}

// 大表格
interface DataType {
  key: React.Key;
  orderIndex: number; // 订单号
  count: number; // 卖出几杯
  time: string; // 下单时间
  price: number; // 收益
  // more?: orderType[]; // 详情，展示具体参数
  more?: any; // 详情，展示具体参数
}

// 嵌套小表格
interface ExpandedDataType {
  name: string; //咖啡名字
  size: string;
  ice: string;
  suger: string;
  count: number;
  price: number;
}

const ViewOrder: FC<IProps> = memo((props) => {
  const { allOrder } = props;

  const [view, setView] = useState(false);
  const [data, setData] = useState<DataType[]>([]);

  const [expandRow, setExpandRow] = useState<React.Key[]>([]);

  /**
   *
   * @param data 传入详情的数据，为more
   * @returns
   */
  const expanderRowRender = (data: orderType[]) => {
    const expandedColumns: ColumnsType<orderType> = [
      {
        title: "品类",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "尺寸",
        dataIndex: "size",
        key: "size",
        render: (size) => <>{seleFM(size)}</>,
      },
      {
        title: "温度",
        dataIndex: "iceLevel",
        key: "iceLevel",
        render: (ice) => <>{seleFM(ice)}</>,
      },
      {
        title: "糖度",
        dataIndex: "sugerLevel",
        key: "sugerLevel",
        render: (suger) => <>{seleFM(suger)}</>,
      },
      {
        title: "单价",
        dataIndex: "price",
        key: "price",
        render: (price) => <>{`￥ ${price}`}</>,
      },
      {
        title: "数量",
        dataIndex: "count",
        key: "count",
        render: (count) => <>{`${count} 杯`}</>,
      },
      {
        title: "总价",
        dataIndex: "allPrice",
        key: "allPrice",
        render: (_, record) => <>{`￥ ${record.count * record.price}`}</>,
      },
    ];
    const expandedData = data.map((item, index) => {
      return {
        key: index + 1, // 加key防止报错
        ...item,
      };
    });
    return (
      <Table
        columns={expandedColumns}
        dataSource={expandedData}
        size="small"
        pagination={false}
      />
    );
  };

  useEffect(() => {
    // 大表里的数据
    const coffeeData: DataType[] = allOrder.map((item, index) => {
      let allPrice = 0;
      item.order.forEach((item) => {
        allPrice += item.count * item.price;
        return allPrice;
      });
      return {
        key: index + 1,
        orderIndex: item.orderIndex,
        count: item.order.length,
        time: item.time,
        price: allPrice,
        more: expanderRowRender(item.order),
      };
    });
    setData(coffeeData);
  }, [allOrder]);

  const btnClick = () => {
    setView(!view);
  };

  const moreClick = () => {
    setExpandRow(["more"]);
  };

  /**
   * 大表
   */
  const columns: ColumnsType<DataType> = [
    {
      title: "订单号",
      dataIndex: "orderIndex",
      key: "orderIndex",
      render: (orderIndex) => <>{orderNum(orderIndex)}</>,
    },
    {
      title: "售出杯数",
      dataIndex: "count",
      key: "count",
      render: (count) => <>{`${count} 杯`}</>,
    },
    {
      title: "下单时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "收益",
      dataIndex: "price",
      key: "price",
      render: (price) => <>{`￥ ${price}`}</>,
    },
    Table.EXPAND_COLUMN,
    {
      title: "详情",
      dataIndex: "more",
      key: "more",
      render: (_, record) => (
        <>
          <div onClick={moreClick}>详情</div>
        </>
      ),
    },
  ];

  return (
    <ViewOrderWrapper>
      <Button onClick={btnClick} className="btn" size="large">
        {view ? "返回点单" : "账单查看"}
      </Button>
      {view && (
        <div className="table">
          <Table
            columns={columns}
            dataSource={data}
            bordered
            title={() => "账单查看"}
            expandable={{
              expandedRowRender: (record) => <>{record.more}</>,
            }}
          />
        </div>
      )}
    </ViewOrderWrapper>
  );
});

export default ViewOrder;
